<template>
  <div class="main active">
    <div class="top">
        <div>
          <countTo :startVal="0" :endVal="50" :duration="5000" />
          <p>预警</p>
        </div>
        <div>
          <countTo :startVal="0" :endVal="50" :duration="5000" />
          <p>报警</p>
        </div>
    </div>
    <div class="bottom">
         <div class="item">
             <b></b>
             <span>企业制动检测设备计量即将到期</span>
             <span>无锡顺鑫汽车维修有限公司</span>
             <span>2020-09-01</span>
         </div>
         <div class="item">
             <b class="warmming"></b>
             <span>企业制动检测设备计量即将到期</span>
             <span>无锡顺鑫汽车维修有限公司</span>
             <span>2020-09-01</span>
         </div>
         <div class="item">
             <b></b>
             <span>企业制动检测设备计量即将到期</span>
             <span>无锡顺鑫汽车维修有限公司</span>
             <span>2020-09-01</span>
         </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: calc(100% - 209px);
  position: relative;
  border: 1px solid rgba(39, 88, 134, 0.73);
  background-color: rgba(0, 39, 87, 0.73);
  box-shadow: inset 0 0 10px 0 rgba(153, 204, 255, 0.1);
  border-radius: 8px;
  //background-color: rgba(23, 87, 121, 0.2);
  &.active {
    //background: rgba(18, 35, 87, 0.9);
    // box-shadow: inset 0 0 30px 0 #9b95e3;
    box-shadow: 0 0 10px rgba(108, 235, 252, 0.99);
    .panel-tools {
      display: block;
    }
    .panel-unit {
      display: none;
    }
  }
  .top{
     width:100%;
     height:17%;
     display:flex;
     div{
         width:25%;
         height:100%;
         box-shadow:0 0 10px yellow;
         border-radius:20px;
         display:flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         color:#6a9ffa;
          font-size:14px;
          span:nth-child(1){
             color:#f0ca61;
             font-size:24px;
         }
     }
     div:nth-child(2){
         box-shadow:0 0 10px red;
         margin-left:20px;
     }
  }
  .bottom{
      width:100%;
      margin-top:15px;
      height:calc( 83% - 15px );
      border: 2px solid rgba(39, 88, 134, 0.73);
      .item{
          box-sizing: border-box;
          width:100%;
          height:10%;
          display:flex;
          justify-content: space-between;
          align-items: center;
          padding:0 20px;
          b{
              width:10px;
              height:10px;
              background:red;
              border-radius:50%;
          }
          b.warmming{
            background:yellow;
          }
          span{
               text-overflow :ellipsis;
               overflow: hidden;
               white-space: nowrap;
          }
          span:nth-child(2){
              display:inline-block;
              width:30%;
               text-align:left;
               padding-left:10px;
              
          }
          span:nth-child(3){
              display:inline-block;
              width:30%;
              text-align:left;
              text-overflow:ellipsis
          }
          span:nth-child(4){
              width:20%;
              text-align:right;
              text-overflow :ellipsis
          }
      }
  }
}
</style>